<template>
    <div>
        <van-row>
            <!-- 居中 -->
            <van-row type="flex" justify="center">
                <van-col span="9">
                    <img alt="Vue logo" width="150" height="150" src="../assets/zut.png">
                </van-col>
            </van-row>
        </van-row>

        <van-row>
            <van-form @submit="onSubmit">
                <van-field
                        v-model="username"
                        label="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                        v-model="password"
                        type="password"
                        label="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                />
                <van-checkbox v-model="checked">记住密码</van-checkbox>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>
        </van-row>
    </div>
</template>
<script>
    export default {
        created() {
            if (this.$route.query.id!=null&&this.$route.query.direction!=null){
                window.sessionStorage.setItem("areaId",this.$route.query.id)
                window.sessionStorage.setItem("direction",this.$route.query.direction)
            }
            if (document.cookie.length > 0) {
                const cookieArr1 = document.cookie.split(";");
                for (let i in cookieArr1) {
                    const cookieArr2 = cookieArr1[i].split("=");
                    //避免输入中含有空格，消除文本框空格
                    cookieArr2[0] = cookieArr2[0].replace(/\s+/g, "");
                    cookieArr2[1] = cookieArr2[1].replace(/\s+/g, "");
                    if (cookieArr2[0] == "userName") {
                        //读取cookie然后进行解码
                        this.username = window.atob(cookieArr2[1]);
                    } else if (cookieArr2[0] == "passWord") {
                        this.password = window.atob(cookieArr2[1]);
                    }
                }
            }
            let user = {
                username: this.username,
                password: this.password
            };
            if (this.username.length>0)
            this.login(user)
        },
        data() {
            return {
                checked: true,
                username: '',
                password: '',
            };
        },
        methods: {
            onSubmit() {
                let user = {
                    username: this.username,
                    password: this.password
                };
                this.login(user)
            },
            login(user){
                this.$http.login.login(user).then((res) => {
                    if (res.flag==true){
                        let time = new Date();
                        if (this.checked){
                            time.setTime(time.getTime() + 24 * 60 * 60 * 1000 * 30);
                        }else{
                            time.setTime(time.getTime()- 1);
                        }
                        //加上window.btoa是为了对用户名和密码进行编码，不让cookie明文展示
                        window.document.cookie = `userName=${window.btoa(this.username)}; path=/; expires=${time.toGMTString()}`;
                        window.document.cookie = `passWord=${window.btoa(this.password)}; path=/; expires=${time.toGMTString()}`
                        window.sessionStorage.setItem("user",this.username)
                        this.$router.push({path:'/home',query: {username:this.username}})
                        if (this.password==="123456"){
                            this.$notify("密码为默认密码，请修改密码");
                        }else{
                            this.$notify({ type: 'success', message: '登录成功' })
                        }
                    }
                    else {
                        this.$notify(res.msg);
                        this.$router.push({path:'/'});
                    }
                })
            },
        },
    };
</script>
<style >

</style>
